<ion-header>
  <ion-navbar>
    <ion-title>
      Profile
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="login has-header">

  <form #loginForm="ngForm" [hidden]="hasLogin">
    <ion-item>
      <ion-label floating>用户名</ion-label>
      <ion-input [(ngModel)]="loginInfo.username" name="username" #username="ngModel" type="text" required></ion-input>
    </ion-item>
    <p [hidden]="username.valid || submitted == false" danger padding-left>
      必填
    </p>

    <ion-item>
      <ion-label floating>密码</ion-label>
      <ion-input [(ngModel)]="loginInfo.password" name="password" #password="ngModel" type="password" required></ion-input>
    </ion-item>
    <p [hidden]="password.valid || submitted == false" danger padding-left>
      必填
    </p>

    <div *ngIf="isLoginError" class="error">
      <p danger>登录失败，请检查你的用户名和密码是否正确</p>
    </div>

    <div padding [hidden]="isLogining">
      <button ion-button [disabled]="!loginForm.form.valid"  (click)="doLogin(loginForm)" type="submit" primary block>Login</button>
    </div>

    <div padding [hidden]="!isLogining || isLoginError">
      <ion-spinner [name]="circles"></ion-spinner>
    </div>
  </form>
  <div class="logout" [hidden]="!hasLogin" (click)="logout()">
    <button ion-button>注销</button>
  </div>
</ion-content>
